<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
		<p>{{ message }}</p>
		<form-item ismust="*" cname="节点名称"> <input slot="input"
			type="text" id="nodeName" class="form-control" placeholder="请输入节点名称"></form-item>
		<li v-for="data in datas">这很好 {{data.key}} this is a test</li>
		<node-table-row :datas="datas"></node-table-row>
	</div>
	<div id="app2">
		<form-item2 ismust="*" cname="别名"> <input slot="input"
			type="text" id="nodeName" class="form-control" placeholder="请输入别名"></form-item2>
	</div>
	<div id="nodePath" class="breadTip zw"
		style="border-bottom: solid 1px #eaeef2; height: 45px;">
		<bread_tip :data="sel_data"></bread_tip>
	</div>
	<template type="text/x-template" id="form-item-con">
	<div class="formItemCon">
		<div class="leftN">
			<span class="mustC">{{ismust}}</span> {{cname}}
		</div>
		<div class="rightI">
			<slot name="input">input control,ex:input,select,radio,
			checkbox</slot>
		</div>
	</div>
	</template>
	<input type="button" onclick="addNode()" value="添加节点" />
	<input type="button" onclick="changeNode()" value="替换节点" />

	<template type="text/x-template" id="node-table-row">
	<tbody>
		<tr v-for="data in datas">
			<td style='text-align: center'><b
				style='color: #46adaa; cursor: pointer;'
				v-on:click='on_show_panel()'> {{data.key}} </b></td>
			<td
				style='text-align: center; word-break: break-all; word-wrap: break-all;'>
				{{data.name}}</td>
			<td style='text-align: center'>{{data.tag}}</td>
			<td style='text-align: center'>
				<p v-if="data.submit">是</p>
				<p v-else>否</p>
			</td>
			<td style='text-align: center'>
				<p v-if="data.leaf">是</p>
				<p v-else>否</p>
			</td>
			<td style='text-align: center'>
				<p v-if="data.show">是</p>
				<p v-else>否</p>
			</td>
			<td style='text-align: center'><b
				style='color: #1592ff; cursor: pointer;'
				@click='on_modify(data.key)'>修改</b> <b style='color: #1592ff;'>|</b>
				<b style='color: #1592ff; cursor: pointer;'
				v-on:click='on_delete(data.key)'>删除</b></td>
		</tr>
	</tbody>
	</template>

	<template type="text/x-template" id="bread_tip"> <span>
		<span v-if="data.fatherKey==''"> <a
			v-bind:click="guideNodeClick(data.fatherKey, data.fatherName)"
			style="cursor: pointer; text-decoration: none;">{{data.fatherName}}</a>
	</span> <span v-else> <a
			v-on:click="guideNodeClick(data.fatherKey, data.fatherName)"
			style="cursor: pointer; text-decoration: none;">{{data.fatherName}}</a>&gt;
			<a v-on:click="guideNodeClick(data.nodeKey, data.nodeName)"
			style="cursor: pointer; text-decoration: none;">{{data.nodeName}}(key:{{data.nodeKey}})</a>

	</span>
	</span> </template>
	<script src="js/page/vue_test.js"></script>
</body>
</html>